<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main welcome-page">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-xs12 layui-col-md6 layui-col-lg3">
                        <div class="panel layui-bg-number">
                            <div class="panel-body">
                                <div class="panel-title">
                                    <span class="label pull-right layui-bg-green">本月</span>
                                    <strong>上班人数</strong>
                                </div>
                                <div class="panel-content">
                                    <h2 class="no-margins">273</h2>
                                    <small class="color-gray">本年:847</small>
                                </div>
                                <div class="panel-rate color-blue">1325%<i class="fa fa-level-up"></i></div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs12 layui-col-md6 layui-col-lg3">
                        <div class="panel layui-bg-number">
                            <div class="panel-body">
                                <div class="panel-title">
                                    <span class="label pull-right layui-bg-red">本月</span>
                                    <strong>上班人数</strong>
                                </div>
                                <div class="panel-content">
                                    <h2 class="no-margins">273</h2>
                                    <small class="color-gray">本年:847</small>
                                </div>
                                <div class="panel-rate color-red">63%<i class="fa fa-level-down"></i></div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs12 layui-col-md6 layui-col-lg3">
                        <div class="panel layui-bg-number">
                            <div class="panel-body">
                                <div class="panel-title">
                                    <span class="label pull-right layui-bg-orange">本月</span>
                                    <strong>上班人数</strong>
                                </div>
                                <div class="panel-content">
                                    <h2 class="no-margins">273</h2>
                                    <small class="color-gray">本年:847</small>
                                </div>
                                <div class="panel-rate color-blue">1325%<i class="fa fa-level-up"></i></div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs12 layui-col-md6 layui-col-lg3">
                        <div class="panel layui-bg-number">
                            <div class="panel-body">
                                <div class="panel-title">
                                    <span class="label pull-right layui-bg-darkblue">本月</span>
                                    <strong>上班人数</strong>
                                </div>
                                <div class="panel-content">
                                    <h2 class="no-margins">273</h2>
                                    <small class="color-gray">本年:847</small>
                                </div>
                                <div class="panel-rate color-red">63%<i class="fa fa-level-down"></i></div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs12 layui-col-md6 layui-col-lg3">
                        <div class="panel layui-bg-number">
                            <div class="panel-body">
                                <div class="panel-title">
                                    <span class="label pull-right layui-bg-lightgreen">本月</span>
                                    <strong>上班人数</strong>
                                </div>
                                <div class="panel-content">
                                    <h2 class="no-margins">273</h2>
                                    <small class="color-gray">本年:847</small>
                                </div>
                                <div class="panel-rate color-blue">1325%<i class="fa fa-level-up"></i></div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs12 layui-col-md6 layui-col-lg3">
                        <div class="panel layui-bg-number">
                            <div class="panel-body">
                                <div class="panel-title">
                                    <span class="label pull-right layui-bg-cyan">本月</span>
                                    <strong>上班人数</strong>
                                </div>
                                <div class="panel-content">
                                    <h2 class="no-margins">273</h2>
                                    <small class="color-gray">本年:847</small>
                                </div>
                                <div class="panel-rate color-red">63%<i class="fa fa-level-down"></i></div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs12 layui-col-md6 layui-col-lg3">
                        <div class="panel layui-bg-number">
                            <div class="panel-body">
                                <div class="panel-title">
                                    <span class="label pull-right layui-bg-lightgreen">本月</span>
                                    <strong>上班人数</strong>
                                </div>
                                <div class="panel-content">
                                    <h2 class="no-margins">273</h2>
                                    <small class="color-gray">本年:847</small>
                                </div>
                                <div class="panel-rate color-blue">1325%<i class="fa fa-level-up"></i></div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs12 layui-col-md6 layui-col-lg3">
                        <div class="panel layui-bg-number">
                            <div class="panel-body">
                                <div class="panel-title">
                                    <span class="label pull-right layui-bg-cyan">本月</span>
                                    <strong>上班人数</strong>
                                </div>
                                <div class="panel-content">
                                    <h2 class="no-margins">273</h2>
                                    <small class="color-gray">本年:847</small>
                                </div>
                                <div class="panel-rate color-red">63%<i class="fa fa-level-down"></i></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-tab layui-tab-card border">
                    <div class="layui-tab-header">数据快熟查看</div>
                    <ul class="layui-tab-title text-right">
                        <li class="layui-this">最新订单</li>
                        <li>置顶订单</li>
                        <li>面试：1面</li>
                        <li>面试：2面</li>
                        <li>面试：更多轮</li>
                        <li>录用(offered)</li>
                        <li>入职</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter" lay-skin="line"></table>
                        </div>
                        <div class="layui-tab-item">2</div>
                        <div class="layui-tab-item">3</div>
                        <div class="layui-tab-item">4</div>
                        <div class="layui-tab-item">5</div>
                        <div class="layui-tab-item">6</div>
                        <div class="layui-tab-item">7</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md4">
                <div class="layui-card border">
                    <div class="layui-card-header"><i class="fa fa-calendar icon icon-tip color-red mr-10"></i>今日日程</div>
                    <div class="layui-card-body layui-text">

                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-card border">
                    <div class="layui-card-header"><i class="fa fa-line-chart icon icon-tip color-red mr-10"></i>业绩指标完成率排名</div>
                    <div class="layui-card-body layui-text">
                        <table class="layui-table" lay-skin="line">
                            <colgroup>
                                <col width="150">
                                <col width="200">
                                <col>
                            </colgroup>
                            <thead>
                            <tr>
                                <th>员工</th>
                                <th>本季度排名</th>
                                <th>年度排名</th>
                                <th>年度完成率</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>Admin</td>
                                <td></td>
                                <td></td>
                                <td><span class="color-blue"><i class="fa fa-level-up"></i>0.0%</span></td>
                            </tr>
                            <tr>
                                <td>Admin</td>
                                <td></td>
                                <td></td>
                                <td><span class="color-blue"><i class="fa fa-level-up"></i>0.0%</span></td>
                            </tr>
                            <tr>
                                <td>Admin</td>
                                <td></td>
                                <td></td>
                                <td><span class="color-blue"><i class="fa fa-level-up"></i>0.0%</span></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-card border">
                    <div class="layui-card-header"><i class="fa fa-bullhorn icon icon-tip color-red mr-10"></i>最新公告</div>
                    <div class="layui-card-body layui-text">
                        <div class="notice">
                            <div class="notice-title">开始使用品牌系统</div>
                            <div class="notice-extra">2019-07-11 23:06</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="statusTableBar">
    {{#  if(d.status == 0){ }}
    <button class="layui-btn layui-btn-xs layui-bg-orange">空缺Vacant</button>
    {{#  } }}
    {{#  if(d.status == 1){ }}
    <button class="layui-btn layui-btn-xs">取消Cancelled</button>
    {{#  } }}
    {{#  if(d.status == 2){ }}
    <button class="layui-btn layui-btn-xs layui-bg-red">完成Filled</button>
    {{#  } }}
    {{#  if(d.status == 3){ }}
    <button class="layui-btn layui-btn-xs layui-bg-black">Unfilled</button>
    {{#  } }}
</script>

<script>
    layui.use(['layer','form', 'table','miniPage','element'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            form = layui.form,
            table = layui.table,
            miniPage = layui.miniPage;

        /**
         * 数据快速查看
         **/
        table.render({
            elem: '#currentTableId',
            url: 'api/table.json',
            skin: 'line',
            cols: [[
                {field: 'ordername', title: '订单名称', templet: function(d){
                    return '<a href="javascript:;" class="mr-10"><i class="fa fa-paperclip"></i> 0</a> ' +
                        '<a href="javascript:;" class="mr-20"><i class="fa fa-comment-o"></i> 0</a>' +
                        '<a href="javascrpt:;" layuimini-href="'+ d.url +'" class="color-blue" lay-event="edit">'+ d.ordername +'</a>'
                }},
                {field: 'companyname', title: '公司名称', templet: function(d){
                    return '<a href="javascrpt:;" class="color-blue">'+ d.companyname +'</a>'
                }},
                {field: 'city', align:'center', width: 120, title: '城市'},
                {field: 'director', title: '订单负责人', templet: function(d){
                    return '<a href="javascrpt:;" class="color-blue">'+ d.director +'</a>'
                }},
                {field: 'candidates', align:'center', width: 80, title: '人选'},
                {field: 'recommend', align:'center', width: 80, title: '推荐'},
                {field: 'interview', align:'center', width: 80, title: '面试'},
                {field: 'offer', align:'center', width: 80, title: 'Offer'},
                {field: 'date', width: 120, title: '建单日期'},
                {field: 'status', width: 120, title: '状态', templet: '#statusTableBar'},
                {field: 'level', align:'center', width: 80, title: '级别', templet: function(d){
                    return '<button class="layui-btn layui-btn-xs">低</span>';
                }},
                {title: '操作', width: 80, fixed: "right", align: "center", templet: function(d){
                    return '<button class="layui-btn layui-btn-xs layui-btn-primary"><i class="fa fa-align-justify"></i></span>';
                }}
            ]],
            page: false
        });

    });
</script>
